﻿@page "/table-sticky-freeze"

<PageTitle>Css Sticky Table</PageTitle>

<h4>基本表格</h4>
<div class="wrapper">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0" style="">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th>Handle</th>
                    <th>Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 5))
                {
                    <tr>
                        <td>@i</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<h4>垂直滚动</h4>
<ul class="text-danger">
    <li>
        垂直滚动时没有下边框。
    </li>
</ul>
<div class="wrapper limitHeight">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0" style="">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th>Handle</th>
                    <th>Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 20))
                {
                    <tr>
                        <td>@i</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<h4>水平滚动</h4>
<ul class="text-danger">
    <li>
        水平滚动时没有左、右边框。
    </li>
</ul>
<div class="wrapper">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0" style="width: 2000px;">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th>Handle</th>
                    <th>Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 5))
                {
                    <tr>
                        <td>@i</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<h4>垂直滚动 + 水平滚动</h4>
<ul class="text-danger">
    <li>
        水平滚动时没有左边框。
    </li>
</ul>
<div class="wrapper limitHeight">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0" style="width: 2000px;">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th>#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th>Handle</th>
                    <th>Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 20))
                {
                    <tr>
                        <td>@i</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<h4>冻结前后列</h4>
<div class="wrapper">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th class="cd-freeze-column" style="width: 80px;">#</th>
                    <th>First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th>Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px;">Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 5))
                {
                    <tr>
                        <td class="cd-freeze-column">@i</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td>@@mdo</td>
                        <td class="cd-freeze-column-r">@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<h4>冻结前后N列</h4>
<div class="wrapper">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th class="cd-freeze-column" style="width: 80px;">#</th>
                    <th class="cd-freeze-column" style="width: 80px; left: 80px;">First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px; right: 80px;">Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px;">Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 5))
                {
                    <tr>
                        <td class="cd-freeze-column">@i</td>
                        <td class="cd-freeze-column" style="left: 80px;">Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td class="cd-freeze-column-r" style="right: 80px;">@@mdo</td>
                        <td class="cd-freeze-column-r">@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

<h4>冻结前后N列 + 垂直滚动 + 水平滚动</h4>
<div class="wrapper limitHeight">
    <div class="cd-table-container">
        <table class="table table-bordered cd-table-sticky mb-0" style="width: 2000px;">
            <thead class="table-light" style="">
                <tr class="" style="">
                    <th class="cd-freeze-column" style="width: 80px;">#</th>
                    <th class="cd-freeze-column" style="width: 80px; left: 80px;">First</th>
                    <th>Last</th>
                    <th>Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px; right: 80px;">Handle</th>
                    <th class="cd-freeze-column-r" style="width: 80px;">Handle</th>
                </tr>
            </thead>
            <tbody>
                @foreach (int i in Enumerable.Range(1, 20))
                {
                    <tr>
                        <td class="cd-freeze-column">@i</td>
                        <td class="cd-freeze-column" style="left: 80px;">Mark</td>
                        <td>Otto</td>
                        <td>@@mdo</td>
                        <td class="cd-freeze-column-r" style="right: 80px;">@@mdo</td>
                        <td class="cd-freeze-column-r">@@mdo</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>